<template>
  <receipt-core
    @clear-open-json="clearOpenJson"
    @pose-edit-json="poseEditJson"
    @pose-submit-json="poseSubmitJson"
    @add-row-sub="addRowSub"
    @data-format="dataFormat"
    @delete-row-sub="deleteRowSub"
    @json-format="jsonFormat"
    ref="idJsonItemsRefs"
    receipts-name="device_spot_check_receipt"
    receipts-type="设备点检"
    receipts-no="004"
  >
    //弹窗的主表的插入的idJson信息
    <template #idJsonSlot>
      <el-row>
        <el-col :span="8">
          <el-form-item label="设备编号：" prop="equipmentNo">
            <autocomplete-input
              v-model="idJsonItems.equipmentNo"
              :value-key="selectedPropMap.selectedOriginProp"
              @get-record="getRecords"
              @change="
                setSelectRow(
                  selectedPropMap.setProp,
                  selectedPropMap.setOriginProp,
                  selectedPropMap.selectedProp
                )
              "
              @select="
                setSelectRow(
                  selectedPropMap.setProp,
                  selectedPropMap.setOriginProp,
                  selectedPropMap.selectedProp
                )
              "
            ></autocomplete-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称：" prop="equipmentName">
            <el-input v-model="idJsonItems.equipmentName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="点检类型：" prop="category">
            <el-input v-model="idJsonItems.category"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="点检人：" prop="people">
            <el-input v-model="idJsonItems.people"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="点检人电话：" prop="phone">
            <el-input v-model="idJsonItems.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="点检时间：" prop="checkTime">
            <el-date-picker
              v-model="idJsonItems.checkTime"
              type="datetime"
              placeholder="请选择时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    //弹窗的子表的表格的插入的subJson信息
    <template #subJson>
      <el-table-column label="点检项" min-width="280">
        <template #default="scope">
          <el-input v-model="subJsonItems[scope.$index].content"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="点检结果" width="280" min-width="160">
        <template #default="scope">
          <el-input v-model="subJsonItems[scope.$index].result"></el-input>
        </template>
      </el-table-column>
    </template>
  </receipt-core>
</template>

<script lang="ts" setup>
import ReceiptCore from "@/components/receipt/ReceiptCore.vue";
import { provide, ref } from "vue";
import { ReceiptsSub } from "@/models/ReceiptsSub";
import { SelectedPropMap } from "@/components/input/SelectedPropMap";
import { AutocompleteInputEvent } from "@/components/input/AutocompleteInputEvent";
import AutocompleteInput from "@/components/input/AutocompleteInput.vue";
import api from "@/utils";

//传递到单据表中需要展示的列到ReceiptsTable
const receiptsTableFieldList = [
  {
    filedName: "idJson.equipmentNo",
    label: "点检设备编号",
    width: 220,
  },
  {
    filedName: "idJson.equipmentName",
    label: "点检设备名称",
    width: 220,
  },
  {
    filedName: "idJson.category",
    label: "点检类型",
    width: 220,
  },
  {
    filedName: "idJson.people",
    label: "点检人",
    width: 220,
  },
  {
    filedName: "idJson.phone",
    label: "点检人电话",
    width: 220,
  },
  {
    filedName: "idJson.checkTime",
    label: "点检时间",
    width: 280,
  },
];
provide("receiptsTableFieldList", receiptsTableFieldList);

// 数据规范, 表中没有需要规范格式的数据, 则不需要这一行.
const dataFormat = (
  columnName: string,
  cellValue: string,
  callback: (value: string) => void
) => {
  if (columnName === "idJson.checkTime") {
    const date = new Date(cellValue);
    const dateFormat = api.formatDate(date, "yyyy年MM月dd日hh时mm分ss秒");
    if (dateFormat !== "NaN年aN月aN日aN时aN分aN秒") {
      callback(dateFormat);
    }
  }
};
//传递idJson内的内容ReceiptsCore的Dialog内的插槽
const idJsonItems = ref({
  equipmentNo: null,
  equipmentName: null,
  category: null,
  people: null,
  phone: null,
  checkTime: null,
} as unknown);
provide("idJsonItems", idJsonItems);

//传递subJson内的内容到ReceiptsCore的Dialog内的Table内的插槽
const subJsonItems = ref([
  {
    content: null,
    result: null,
  },
] as Array<unknown>);
// provide("subJsonItems", subJsonItems);

//清空传递idJson内的内容ReceiptsCore的Dialog内的插槽内容
//清空传递subJson内的内容ReceiptsCore的Dialog内的Table内的插槽内容
//远程搜索的数据除外，不用清除，不然无法使用远程搜索
const clearOpenJson = () => {
  idJsonItems.value = {
    category: null,
    people: null,
    phone: null,
    checkTime: null,
  };
  subJsonItems.value = [
    {
      content: null,
      result: null,
    },
  ];
};

//子组件编辑时将某行idJson传递回本父组件并导入插槽内
//子组件编辑时将某行receiptsSub传递回本父组件，然后取出subJson导入插槽内
const poseEditJson = (idJson: unknown, receiptsSub?: Array<ReceiptsSub>) => {
  idJsonItems.value = idJson;
  if (receiptsSub?.length === undefined || receiptsSub?.length === 0) {
    subJsonItems.value = [
      {
        content: null,
        result: null,
      },
    ];
  } else if (subJsonItems.value.length >= receiptsSub.length) {
    let i = 0;
    for (i; i < receiptsSub.length; i = i + 1) {
      subJsonItems.value[i] = receiptsSub[i].subJson;
    }
  } else {
    let j = subJsonItems.value.length;
    for (j; j < receiptsSub.length; j = j + 1) {
      subJsonItems.value.push({});
    }
    let i = 0;
    for (i; i < receiptsSub.length; i = i + 1) {
      subJsonItems.value[i] = receiptsSub[i].subJson;
    }
  }
};

//提交表单时将最新的ReceiptsSub传来处理，加入subJson后用callback返回
const poseSubmitJson = (
  callback: (value: Array<ReceiptsSub>) => void,
  no: string,
  receiptsSub: Array<ReceiptsSub>
) => {
  if (receiptsSub?.length === 0) {
    subJsonItems.value = [];
  } else {
    let i = 0;
    for (i; i < receiptsSub.length; i = i + 1) {
      receiptsSub[i].subJson = subJsonItems.value[i];
      receiptsSub[i].no = no;
    }
  }
  callback(receiptsSub);
};

const addRowSub = () => {
  subJsonItems.value.push({});
};
const deleteRowSub = (index: number) => {
  subJsonItems.value.splice(index, 1);
};
const jsonFormat = (
  data: Record<string, unknown>[][],
  callback: (value: Record<string, unknown>[]) => void
) => {
  let jsonList: Record<string, unknown>[] = [];
  for (let i = 0; i < data[0].length; i++) {
    // 存入字段名和excel表中的名称的映射，记得修改
    jsonList[i] = {};
    jsonList[i].no = data[0][i]["test1"];
    jsonList[i].name = data[0][i]["test2"];
    jsonList[i].description = data[0][i]["test3"];
    jsonList[i].departmentPhone = data[0][i]["test4"];
    jsonList[i].createUser = sessionStorage.getItem("token") as string;
    jsonList[i].createGmt = new Date();
  }
  callback(jsonList);
};
/**
 * 远程搜索和名称跟随
 */
const selectedPropMap = {
  selectedProp: "equipmentNo",
  selectedOriginProp: "no",
  setProp: "equipmentName",
  setOriginProp: "name",
} as SelectedPropMap;

const { getRecords, setSelectRow } = AutocompleteInputEvent(
  "/basic-request/Equipment",
  idJsonItems,
  selectedPropMap
);
</script>

<style scoped></style>
